<template>
  <div>
    <van-tabs v-if="!tabcontrol" v-model="active" swipeable @change="getData" :background="datas.tab_bg_color"
      :title-active-color="datas.tab_active_color" :color="datas.tab_active_color"
      :title-inactive-color="datas.tab_color">
      <van-tab title="分佣记录" name="0">
        <div v-for="(profititem, pIndex) in profitList" :key="pIndex" class="box">
          <div class="list-item-goods">
            <div class="goods-image">
              <img :src="profititem.goods.thumb" />
            </div>
            <div>{{ profititem.goods.title }}</div>
          </div>
          <div class="list-item">
            <div>
              分佣时间
            </div>
            <div>{{ profititem.created_at }}</div>
          </div>
          <div class="list-item">
            <div>
              分佣金额
            </div>
            <div style="color:#f15353">{{ profititem.amount }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="申请记录" name="1">
        <div v-for="(agentitem, aIndex) in agentList" :key="aIndex" class="box">
          <div class="list-item-goods">
            <div class="goods-image">
              <img :src="agentitem.goods.thumb" />
            </div>
            <div>{{ agentitem.goods.title }}</div>
          </div>
          <div class="list-item">
            <div>
              申请时间
            </div>
            <div>{{ agentitem.updated_at }}</div>
          </div>
          <div class="list-item">
            <div>
              审核状态
            </div>
            <div v-if="agentitem.status == 1" class="agree">已通过</div>
            <div v-else class="await">待审核</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      datas: {
        tab_bg_color: '',
        tab_active_color: '',
        tab_color: ''
      },
      agentList: [],
      profitList: []
    };
  },
  created() {
    this.getData();
  },
  computed: {

  },
  methods: {

    getData() {
      $http.post("plugin.goods-agent.frontend.agent.get-data&page=1&size=10000", {}, " ").then(
        res => {
          if (res.result == 1) {
            this.agentList = res.data.agentList;
            this.profitList = res.data.profitList;
          }
          console.log(this.agentList);

        },
        function (res) {
          this.$dialog.alert({ message: res.data.msg });
        }
      );
    }
  }
};    
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.box{
  background-color: #fff;
  margin-top:10px;
  padding-bottom:15px;
  padding:10px;
}
.agree {
  color: green
}

.await {
  color: #f15353
}

.list-item-goods {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 5px;
}

.list-item-goods {
  .goods-image {
    margin-right: 10px;
    img {
      border-radius: 5px;
      width: 50px;
      height: 50px;
    }
  }

}

.list-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px 0;
}
</style>
